<template>
	<view v-if="pageShow" style="padding-bottom: 150rpx;">
		<!-- 课程信息 -->
		<view class="mainpadding ffffff">
			<view class="xiahuaxian margin_top">
				<view class="flexbetween">
					<view class="shilitu">
						<image :src="dataAll.kcinfo.image_text" mode=""></image>
					</view>
					<view class="" style="width: 69%;">
						<view class="titletext xiaohei fonweight yhxk">{{dataAll.kcinfo.name}}</view>
						<view class="strongtext xiaohui nofonweight margin_top2 yhxk">{{dataAll.kcinfo.kc_des}} </view>
						<view class="titletext xiaohong fonweight margin_top2">¥ {{dataAll.kcinfo.priceinfo.price}}
						</view>
					</view>
				</view>
			</view>
			<view class="ershiba xiaohei nofonweight margin_top1">
				地址：{{dataAll.kcinfo.cityinfo}}{{dataAll.kcinfo.address}} </view>
		</view>
		<!-- 课包选择 -->
		<view class="mainpadding ffffff margin_top1">
			<view class="sanshier xiaohei fonweight">课包</view>
			<view class="flexleft flex_wrap">
				<view class="sanshis flexcenter">
					<view class="yixuanbox margin_top">
						<view class="sanshier xiaobai fonweight textcenter">{{dataAll.kckbinfo.num}}节课</view>
						<view class="ershiba xiaobai nofonweight margin_top0 textcenter">赠送{{dataAll.kckbinfo.send_num}}节</view>
						<view class="ershiba xiaobai nofonweight margin_top1 textcenter">已选择</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 优惠 -->
		<view class="mainpadding ffffff margin_top1" v-if="dataAll.coupon_list.length">
			<view class="sanshier xiaohei fonweight">优惠</view>
			<view class="flexbetween margin_top" @click="yhqShow=true">
				<view class="ershiba xiaohui nofonweight">优惠券</view>
				<view class="flexright">
					<view class="ershiba xiaohui nofonweight">{{coupon_name?coupon_name:'选择优惠券'}}</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
		</view>
		<!-- 时间选择 -->
		<view class="mainpadding ffffff margin_top1">
			<view class="sanshier xiaohei fonweight">时间选择</view>
			<view class="flexbetween margin_top" @click="messageTime.timeShow = true">
				<view class="ershiba xiaohui nofonweight">{{time?time:'开始上课时间'}}</view>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		<view class="mainpadding ffffff margin_top1">
			<view class="sanshier xiaohei fonweight">排课时间选择</view>
			<template v-if="kc_list.week_1.length">
				<view class="sanshier xiaohei fonweight margin_top1">周一</view>
				<view class="flexleft flex_wrap">
					<view :class="item.ischeck?'lvbox':'huibox'" v-for="item in kc_list.week_1" :key="item.id"
						@click="changeitem(item)">{{item.jlinfo.name}}:{{item.start_time}}-{{item.end_time}}
					</view>
				</view>
			</template>
			<template v-if="kc_list.week_2.length">
				<view class="sanshier xiaohei fonweight margin_top1">周二</view>
				<view class="flexleft flex_wrap">
					<view :class="item.ischeck?'lvbox':'huibox'" v-for="item in kc_list.week_2" :key="item.id"
						@click="changeitem(item)">{{item.jlinfo.name}}:{{item.start_time}}-{{item.end_time}}
					</view>
				</view>
			</template>
			<template v-if="kc_list.week_3.length">
				<view class="sanshier xiaohei fonweight margin_top1">周三</view>
				<view class="flexleft flex_wrap">
					<view :class="item.ischeck?'lvbox':'huibox'" v-for="item in kc_list.week_3" :key="item.id"
						@click="changeitem(item)">{{item.jlinfo.name}}:{{item.start_time}}-{{item.end_time}}
					</view>
				</view>
			</template>
			<template v-if="kc_list.week_4.length">
				<view class="sanshier xiaohei fonweight margin_top1">周四</view>
				<view class="flexleft flex_wrap">
					<view :class="item.ischeck?'lvbox':'huibox'" v-for="item in kc_list.week_4" :key="item.id"
						@click="changeitem(item)">{{item.jlinfo.name}}:{{item.start_time}}-{{item.end_time}}
					</view>
				</view>
			</template>
			<template v-if="kc_list.week_5.length">
				<view class="sanshier xiaohei fonweight margin_top1">周五</view>
				<view class="flexleft flex_wrap">
					<view :class="item.ischeck?'lvbox':'huibox'" v-for="item in kc_list.week_5" :key="item.id"
						@click="changeitem(item)">{{item.jlinfo.name}}:{{item.start_time}}-{{item.end_time}}
					</view>
				</view>
			</template>
			<template v-if="kc_list.week_6.length">
				<view class="sanshier xiaohei fonweight margin_top1">周六</view>
				<view class="flexleft flex_wrap">
					<view :class="item.ischeck?'lvbox':'huibox'" v-for="item in kc_list.week_6" :key="item.id"
						@click="changeitem(item)">{{item.jlinfo.name}}:{{item.start_time}}-{{item.end_time}}
					</view>
				</view>
			</template>
			<template v-if="kc_list.week_0.length">
				<view class="sanshier xiaohei fonweight margin_top1">周日</view>
				<view class="flexleft flex_wrap">
					<view :class="item.ischeck?'lvbox':'huibox'" v-for="item in kc_list.week_0" :key="item.id"
						@click="changeitem(item)">{{item.jlinfo.name}}:{{item.start_time}}-{{item.end_time}}
					</view>
				</view>
			</template>
		</view>

		<!-- 固定底部 -->
		<view class="gudingdb">
			<!-- <view class="mainpadding ffffff xiahuaxian">
				<view class="flexleft">
					<u-icon class="margin_right1" name="checkmark-circle-fill" color="#1BA95B" size="24"></u-icon>
					<view class="wexuanzicon"></view>
					<view class="ershil nofonweight xiaohei">是否选择保险</view>
				</view>
			</view> -->
			<view class="mainpadding ffffff flexbetween">
				<view class="">
					<view class="strongtext xiaohei nofonweight" v-if="dataAll.kcinfo.kc_attr!=5">需支付：
						<text class="xiaohong ershiba fonweight">￥{{dataAll.pay_info.pay_price}}</text>
					</view>
					<view class="strongtext xiaohei nofonweight" v-if="dataAll.kcinfo.kc_attr==5">需支付：
						<text class="xiaohong ershiba fonweight">{{dataAll.pay_info.total_score}}分<text
								v-if="Number(dataAll.pay_info.pay_price)">+￥{{dataAll.pay_info.pay_price}}</text></text>
					</view>
					<view class="xiaohuang strongtext nofonweight" v-if="dataAll.pay_info && dataAll.pay_info.zk_price">会员优惠{{dataAll.pay_info.zk_price}}元</view>
					<view class="xiaohuang strongtext nofonweight">（优惠券抵扣{{dataAll.pay_info.coupon_price}}元）</view>
				</view>
				<view class="xiaobtnty" @click="tzyyxx">立即支付</view>
			</view>
		</view>
		<timePicker :messageTime="messageTime" @timeConfirm="timeConfirm"></timePicker>
		<u-popup :show="yhqShow" @close="yhqShow=false">
			<view class="mainpadding_top fonweight flexcenter">优惠券</view>
			<view class="mainpadding" style="background-color: #f9f9f9;">
				<scroll-view scroll-y="true" style="height: 600rpx;">
					<view class=" margin_top" v-for="item in dataAll.coupon_list" :key="item.id"
						@click="selectrole(item)">
						<view class="flexleft yxzbox" v-show="item.id==coupon_id">
							<view class="nerbox youbk">
								<view class="smalltext xiaobai nofonweight">￥
									<text class="bigtext xiaobai fonweight">{{item.price}}</text>
								</view>
								<view class="strongtext xiaobai nofonweight margin_top1">
									{{Number(item.mj_price)==0?"无使用门槛":"满"+item.mj_price}}
								</view>
							</view>
							<view class="nerbox">
								<view class="sanshier xiaobai nofonweight">{{item.name}}</view>
								<view class="strongtext xiaobai nofonweight margin_top1">有效截止日期：{{item.end_time_text}}
								</view>
							</view>
						</view>
						<view class="flexleft wexbxo" v-if="item.id!=coupon_id">
							<view class="nerbox youbk">
								<view class="smalltext xiaolv nofonweight">￥
									<text class="bigtext xiaolv fonweight">{{item.price}}</text>
								</view>
								<view class="strongtext xiaohei nofonweight margin_top1">
									{{Number(item.mj_price)==0?"无使用门槛":"满"+item.mj_price}}
								</view>
							</view>
							<view class="nerbox">
								<view class="sanshier xiaohei nofonweight">{{item.name}}</view>
								<view class="strongtext xiaohei nofonweight margin_top1">有效截止日期：{{item.end_time_text}}
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				sjshow: false,
				listid: "",
				coupon_id: "",
				yhqShow: false,
				coupon_name: "",
				dataAll: {},
				pageShow: false,
				messageTime: {
					timeShow: false,
					title: "选择时间",
					mode: "date", //date日期，datetime年月日时分秒，time时间
					minDate: Number(new Date())
				},
				time: "",
				kc_list: {},

			}
		},
		onLoad(options) {
			this.messageTime.minDate = Number(new Date())
			this.listid = options.id
			this.getkcbList()
		},
		onShow() {
			this.init()
		},
		methods: {
			changeitem(item){
				item.ischeck = !item.ischeck
			},
			selectrole(item) {
				this.coupon_id = item.id
				this.coupon_name = item.name
				this.init()
			},
			timeConfirm(e) {
				this.time = e
			},
			getkcbList() {
				httpRequest.request('/api/kccl/getKcKcbIndex', 'GET', {
					kc_id: this.listid,
				}, false, false, true).then(res => {
					for (let i in res.data) {
						res.data[i].forEach(item => {
							this.$set(item, "ischeck", false)
						})
					}
					this.kc_list = res.data
				})
			},
			init() {
				httpRequest.request('/api/kccl/kcKjSure', 'POST', {
					kc_kj_id: this.listid,
					coupon_id: this.coupon_id
				}, false, false, true).then(res => {
					this.dataAll = res.data
					this.pageShow = true
				})
			},
			// 跳转支付
			tzyyxx() {
				if (this.time == "") {
					httpRequest.toast("请选择上课时间")
					return false
				}
				let arr = []
				for (let i in this.kc_list) {
					this.kc_list[i].forEach(item => {
						if (item.ischeck) {
							arr.push(item.id)
						}
					})
				}
				if (arr.length == 0) {
					httpRequest.toast("请选择课表")
					return false
				}
				httpRequest.request('/api/kccl/addKcOrder', 'POST', {
					coupon_id: this.coupon_id,
					kc_kcb_ids: arr.join(),
					sk_time: this.time,
					kc_kj_id: this.listid,
				}, false, false, true).then(res => {
					if (res.code == 1) {
						uni.redirectTo({
							url: '/pages_homepage/zhifu?type=3&price=' + res.data.pay_price + "&id=" + res
								.data.id
						})
					} else {
						httpRequest.toast(res.msg)
					}
				})

			},
			sjclose() {
				this.sjshow = false
			},
		}
	}
</script>

<style lang="scss" scoped>
	.toumd {
		opacity: 0.5;
	}

	.xiahuaxian1 {
		border-bottom: 1rpx solid #F5F5F5;
	}

	.nerbox {
		padding: 38rpx 31rpx;
	}

	.wexbxo {
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.youbk {
		border-right: 2rpx solid #F5F5F5;
	}

	.yxzbox {
		background: #1BA95B;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.lvbox {
		padding: 10rpx 20rpx;
		border-radius: 50rpx;
		color: #FFFFFF;
		font-size: 26rpx;
		margin: 30rpx 30rpx 0 0;
		background-color: #1ba95d;
	}

	.huibox {
		padding: 10rpx 20rpx;
		border-radius: 50rpx;
		color: #999;
		margin: 30rpx 30rpx 0 0;
		background-color: #f7f7f7;
		font-size: 26rpx;
	}

	.quedbtn {
		width: 292rpx;
		height: 72rpx;
		background: #1BA95B;

		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.chongzhibtn {
		width: 292rpx;
		height: 72rpx;
		background: #BAC3D5;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.weixbox {
		background: #F5F5F5;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		padding: 36rpx 50rpx;
	}

	.yixuanbox {
		background: #1BA95B;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		padding: 34rpx 50rpx 38rpx;

	}

	.xiaolvbtn {
		width: 112rpx;
		height: 56rpx;
		background: #1BA95B;
		border-radius: 32rpx 32rpx 32rpx 32rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.shilitu {
		width: 200rpx;
		height: 160rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	page {
		background: #F9F9F9;
	}
</style>